<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>数据汇总</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
  <style>
    .layuiadmin-card-list p.layuiadmin-big-font{
      font-size: 31px;
    }
  </style>
</head>
<body>

  <div class="layui-fluid">

    <div class="layui-row layui-col-space15">

      <div class="layui-col-sm3 header-data">
        <div class="layui-card">
          <div class="layui-card-header">
            <span style="color: #999;font-size: 13px;">近30天充值</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">{$summary.30_total_recharge}</p>
            <p>
              今日充值
              <span class="layuiadmin-span-color">{$summary.today_total_recharge}</span>
            </p>
          </div>
        </div>
      </div>


      <div class="layui-col-sm3 header-data">
        <div class="layui-card">
          <div class="layui-card-header">
            <span style="color: #999;font-size: 13px;">近30天结算</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">{$summary.30_total_settlement_amount}</p>
            <p>
              待结算
              <span class="layuiadmin-span-color">{$summary.30_total_unsettlement_amount}</span>
            </p>
          </div>
        </div>
      </div>

      <div class="layui-col-sm3 header-data">
        <div class="layui-card">
          <div class="layui-card-header">

            <span style="color: #999;font-size: 13px;">代理结算金额</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">{$summary.total_settlement_amount}</p>
            <p>
              待结算金额
              <span class="layuiadmin-span-color">{$summary.total_unsettlement_amount}</span>
            </p>

          </div>
        </div>
      </div>

      <div class="layui-col-sm3 header-data">
        <div class="layui-card">
          <div class="layui-card-header">

            <span style="color: #999;font-size: 13px;">累计用户</span>
          </div>
          <div class="layui-card-body layuiadmin-card-list">
            <p class="layuiadmin-big-font">{$summary.total_user_num}</p>
            <p>
              已加桌
              <span class="layuiadmin-span-color">{$summary.total_user_jiazhuo}</span>
            </p>

          </div>
        </div>
      </div>

      <div class="layui-col-sm12">
        <div class="layui-card">
          <div class="layui-card-header">
            近30天用户增长趋势
          </div>
          <div class="layui-card-body">
            <div class="layui-row">
              <div class="layui-col-sm12">
                    <div id="LAY-user-growth-trend" style="width:100%;height: 300px">
                    </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="layui-col-sm12">
        <div class="layui-row layui-col-space15">

          <div class="layui-col-sm12">
            <div class="layui-card">
              <div class="layui-card-header">充值用户排行榜(不含今日)</div>
              <div class="layui-card-body">
                <table class="layui-table layuiadmin-page-table" lay-skin="line">
                  <thead>
                    <tr>
                      <th style="text-align: center">序号</th>
                      <th style="text-align: center">用户</th>
                      <th style="text-align: center">充值金额</th>
                      <th style="text-align: center">注册时间</th>
                    </tr> 
                  </thead>
                  <tbody>

                    {empty name="userRechargeRank"}
                    <tr>
                      <td align="center" colspan="4">无数据</td>
                    </tr>
                    {else /}
                    {volist name="userRechargeRank" id="v" key="k"}
                    <tr>
                      <td align="center">{$k}</td>
                      <td align="center">{$v.nickname}（ID：{$v.uid}）</td>
                      <td align="center"><span>{$v.money}</span></td>
                      <td align="center">{$v.create_time}</i></td>
                    </tr>
                    {/volist}
                    {/empty}


                  </tbody>
                </table>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>

  <script src="/static/layuiadmin/layui/layui.js"></script>
  <script src="/static/layuiadmin/lib/extend/echarts.min5.4.3.js"></script>
  <script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
    ,version: 1

  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index']);

  var user_growth_x = {$days};

  var user_growth_y_xz = {$new_user_num_growth};
  var user_growth_y_gz = {$jiazhuo_user_num_growth};

  var option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(50,50,50,0.5)',   // 提示背景颜色，默认为透明度为0.7的黑色
      textStyle: {
        color: "#fff"
      },
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    calculable : true,
    legend: {},

    xAxis : [
      {
        type : 'category',
        boundaryGap: false,
        data : user_growth_x
      }
    ],
    yAxis : [
      {
        type : 'value',
        name : '',
        axisLabel : {
          formatter: '{value} '
        },
        axisLine: {
          show: true
        }
      },
      {
        type : 'value',
        name : '',
        axisLabel : {
          formatter: '{value} '
        },
        axisLine: {
          show: true
        }
      }
    ],
    series : [
      {
        name:'新增用户',
        type:'line',
        itemStyle: {normal: {areaStyle: {type: 'default'}}},
        data: user_growth_y_xz
      },
      {
        name:'加桌用户',
        type:'line',
        itemStyle: {normal: {areaStyle: {type: 'default'}}},
        data:user_growth_y_gz
      },
    ]
  };

  var myChart = echarts.init(document.getElementById('LAY-user-growth-trend'));
  myChart.setOption(option);
  window.onresize = myChart.resize;



  </script>
</body>
</html>